<template>
    <span class="time">{{time}}</span>
</template>

<script>

    export default {
        props: {},
        data() {
            return {
                time: this.formatDate()
            }

        },
        mounted() {
            this.timer = setInterval(() => {
                this.time = this.formatDate();
                this.$emit('timeCallback')
            }, 1000)
        },
        methods: {
            formatDate () {
                let date = new Date();
                let sp = ":";
                let month = date.getMonth() + 1;
                let day = date.getDate();
                var hour = date.getHours();
                var minute = date.getMinutes();
                var second = date.getSeconds();

                if (hour < 10) {
                    hour = "0" + hour;
                }
                if (minute < 10) {
                    minute = "0" + minute;
                }
                if (second < 10) {
                    second = "0" + second;
                }
                return date.getFullYear() + '年' + month + '月' + day + "日  " + hour + sp + minute + sp + second;
            }
        },
        destroyed() {
            clearInterval(this.timer)
        }
    };
</script>
<style>
    .time {
        color: #D7D7D7;
        font-size: 24px;
    }
</style>
